<!--
 * @Description: 
 * @Date: 2023-05-06 11:18:43
 * @LastEditors: czp
 * @LastEditTime: 2023-05-09 14:43:40
-->
<template>
	<div class="tab-box">
		<ElMenu mode="vertical" :default-active="activeIndex" class="el-menu" @select="selectMenu">
			<ElMenuItem class="el-menu-item" v-for="(item, index) in menu" :key="item.value" :index="String(index)"> {{ item.label }} </ElMenuItem>
		</ElMenu>

		<div class="right-content-box">
			<!-- 基本信息 -->
			<div class="content-item">
				<div class="title">{{ menu[Number(activeIndex)].label }}</div>
				<BaseInfo v-if="activeIndex == '0'" />
				<Level v-if="activeIndex == '1'" />
				<EditPassword v-if="activeIndex == '2'" />
			</div>

			<!-- 村民等级
			<div class="content-item" v-if="activeIndex == '1'">
				<div class="title">村民等级</div>
				<VillagerLevel></VillagerLevel>
			</div>

			<div class="content-item" v-if="activeIndex == '2'">密码修改</div> -->
		</div>
	</div>
</template>

<script setup lang="ts" name="Profile">
const activeIndex = ref("0");

// 左侧tab栏value
const menu = [
	{ label: "基本信息", value: 1 },
	{ label: "村民等级", value: 2 },
	{ label: "密码修改", value: 3 }
];

/**
 * 选择菜单
 */
const selectMenu = (key: string) => {
	activeIndex.value = key;
};
</script>

<style scoped lang="scss">
.tab-box {
	display: flex;
	width: 100%;
}
.right-content-box {
	flex: 1;
	margin-left: 10px;
	background-color: #ffffff;
	.content-item {
		.title {
			display: flex;
			align-items: center;
			padding: 20px;
			font-size: 16px;
			border-bottom: 1px solid #e8e8e8;
			span {
				margin-left: 10px;
				font-size: 13px;
				color: #999999;
			}
		}
	}
}
</style>
